<template>
	<view>
		<view class="nav_header">
			<view class="all bopx" v-for="item in allT" :key="item._id" :class="{active:item.isShow}">
				<text @tap="chuxian(item._id)" v-if="item.isShow">{{item.text}}▼</text>
				<text @tap="chuxian(item._id)" v-else>{{item.text}}▲</text>
				<template >
					<view class="m" v-if="item.isShow"  >
						<view class="motai" >
						</view>
						<view class="t1">
							<view class="box clearfloor">
								<view class="box_li" v-for="i in item.li" :key="i._id" :class="{active:ischoose[1][item._id-1]==i._id}"
									@tap="chooseLi(i._id,i.name,item._id)">
									{{i.name}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			
	
			<view class="ing bopx">
				<text>进行中</text>
			</view>
			
		</view>
	
		<view class="main">
			<view class="box_main">
				<!-- <view class="header">
					<text>黄金</text>
				</view> -->
				<view class="box_content">
					<view class="box_11" v-for="i in buyList" :key="i.name" @tap="navto(i.name,i.buyAmount)"> 
						<view class="center">
							<view class="l" :style="'background-color:#4B65FB'">
								<text>{{i.productType}}</text>
							</view>
							<view class="r-1">
								<text class="txt1">{{i.name}}</text>
								<text class="data1">\n{{i.buyTime||""}}</text>
							</view>
						</view>
						<view class="r">
							<text class="r11">{{i.buyAmount+'元' ||''}}</text>
							<text class="r12">\n{{i.buyAmount?'订单完成':'待确认'}}</text>
						</view>
					</view>
				</view>
			</view>
		<!-- 	<view class="box_main" v-if="fixed.lists" >
				<view class="box_content">
					<view class="box_11" v-for="i in fixed.lists" :key="i.name" @tap="navto(i.name,i.totalPrincipal)"> 
						<view class="center">
							<view class="l" :style="'background-color:#fba573'">
								<text>定期</text>
							</view>
							<view class="r-1">
								<text class="txt1">{{i.name}}</text>
								<text class="data1">\n{{i.buyDate}}</text>
							</view>
						</view>
						<view class="r">
							<text class="r11">{{i.totalPrincipal}}元</text>
							<text class="r12">\n订单完成</text>
						</view>
					</view>
				</view>
			</view>
			<view class="box_main" v-if="gold.lists">
				<view class="box_content">
					<view class="box_11" v-for="i in gold.lists" :key="i.name" @tap="navto(i.name,i.totalPrincipal)"> 
						<view class="center">
							<view class="l" :style="'background-color:#8ccbfb'">
								<text>黄金</text>
							</view>
							<view class="r-1">
								<text class="txt1">{{i.name}}</text>
								<text class="data1">\n{{i.buyDate}}</text>
							</view>
						</view>
						<view class="r">
							<text class="r11">{{i.totalPrincipal}}元</text>
							<text class="r12">\n订单完成</text>
						</view>
					</view>
				</view>
			</view>
			<view class="box_main" v-if="fund.lists">
				<view class="box_content">
					<view class="box_11" v-for="i in fund.lists" :key="i.name" @tap="navto(i.name,i.totalPrincipal)"> 
						<view class="center">
							<view class="l" :style="'background-color:#fb9090'">
								<text>基金</text>
							</view>
							<view class="r-1">
								<text class="txt1">{{i.name}}</text>
								<text class="data1">\n{{i.buyDate}}</text>
							</view>
						</view>
						<view class="r">
							<text class="r11">{{i.totalPrincipal}}元</text>
							<text class="r12">\n订单完成</text>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('order');
	// import motai from "../..//components/motai/motai.vue"
	export default {
		components:{
			// motai
		},
		data() {
			return {
				fund: {},
				gold: {},
				fixed: {},
				current: {},
				buyList:[],
				ischoose: [0,[0,0]],//[打开的主选项，[第一个主选项的子选项下标，第二个]]
				allT: [{
					_id: 1,
						text:"全选",
					isShow:false,
					li:[{
						_id: 1,
						name: "交易记录"
					}, {
						_id: 2,
						name: "转入"
					}, {
						_id: 3,
						name: "买进"
					}, {
						_id: 4,
						name: "卖金"
					}, {
						_id: 5,
						name: "投保"
					}, {
						_id: 6,
						name: "站让"
					}, {
						_id: 7,
						name: "冻结/解冻"
					}, {
						_id: 8,
						name: "退保"
					}, {
						_id: 9,
						name: "分红"
					}, {
						_id: 10,
						name: "其他"
					}]
				},{
					_id: 2,
					text:"交易类型",
					isShow:false,
					li:[{
						_id: 1,
						name: "全部"
					}, {
						_id: 2,
						name: "基金"
					}, {
						_id: 3,
						name: "黄金"
					}, {
						_id: 4,
						name: "定期"
					}, {
						_id: 5,
						name: "活期"
					}]
				}],				
				zhangdan: [{
					_id: 1,
					data: "2021年01月",
					li: [{
						_id: 1,
						color: "#F3DBA8",
						colorTxt: "小金融",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
						url:"/pagesD/billd/billd"

					},
					{
						_id: 2,
						color: "#4B65FB",
						colorTxt: "智投",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
						url:"/pagesD/billd/billd"
					},
					{
						_id: 3,
						color: "#EE3E3A",
						colorTxt: "基金",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
						url:"/pagesD/billd/billd"
					}]
				},{
					_id: 2,
					data: "2021年02月",
					li: [{
						_id: 1,
						color: "#F3DBA8",
						colorTxt: "小金融",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
						url:"/pagesD/billd/billd"
					},
					{
						_id: 2,
						color: "#4B65FB",
						colorTxt: "智投",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
							url:"/pagesD/billd/billd"
					},
					{
						_id: 3,
						color: "#EE3E3A",
						colorTxt: "基金",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
						url:"/pagesD/billd/billd"
					}]
				},{
					_id: 3,
					data: "2021年03月",
					li: [{
						_id: 1,
						color: "#F3DBA8",
						colorTxt: "小金融",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
						url:"/pagesD/billd/billd"
					},
					{
						_id: 2,
						color: "#4B65FB",
						colorTxt: "智投",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
						url:"/pagesD/billd/billd"
					},
					{
						_id: 3,
						color: "#EE3E3A",
						colorTxt: "基金",
						textcon: "收益-京东小乘客",
						time_data: "2020-02-25 00:00:11",
						money: "100圆",
						type: "订单完成",
						url:"/pagesD/billd/billd"
					}]
				}]
			}
		},
		methods: {
			...mapActions(['holdType','orderBuy']),
			chooseLi(li,name1,id) {
				this.ischoose[1][id-1] = li  //被选取的子元素
				this.allT[this.ischoose[0]-1].text=name1  //切换父元素文本
				this.allT.forEach(item=>item.isShow=false)  //关闭父元素下拉样式
				// this.ischoose[0] = 0 //关闭下拉框
			},
			chuxian(u){
				//根据ischoose[0]的值判断当前状态，没有值为打开状态，反之为关闭状态
				// if(this.ischoose[0]==u){ //关闭状态
				// console.log(55555)
				// 	// this.allT.forEach(item=>{item.isShow=false}) //将所有关闭样式打开
				// 	// this.ischoose[0]=0  //关闭下拉框
				// }else{ //打开状态
				// console.log(666)
					this.allT.forEach(item=>item.isShow=item._id==u) //打开下拉框
					this.ischoose[0]=u  //赋值
				// }
			
			},
			navto(a,b){
				// 跳转链接
				uni.navigateTo({
					url:"/pagesD/billd/billd?name="+ a + "&money=" + b
				})
			}
		
		},
		async onLoad() {
			// this.fund = await this.holdType('fund')
			// this.gold = await this.holdType('gold')
			// this.fixed = await this.holdType('fixed')
			// this.current = await this.holdType('current')
			// console.log(this.fund, this.gold, this.fixed, this.current)
			this.buyList= await this.orderBuy()
			console.log(this.buyList)
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.motai {
		background-color: red;
		opacity: .3;
		position: fixed;
		top: 70rpx;
		left: 0;
		width: 750rpx;
		height: 100vh;
		z-index: 1;
	
	
	}
	
	.t1 {
		position: fixed;
		top: 70rpx;
		left: 0;
		width: 750rpx;
		background-color: white;
		z-index: 3;
		padding-bottom: 50rpx;
		overflow: hidden;
	
		.box {
			background-color: white;
	
			box-sizing: border-box;
			padding: 10rpx 40rpx;
	
			.box_li {
				border: 1px solid #ABABAB;
				color: black;
				width: 150rpx;
				height: 80rpx;
				float: left;
				margin: 20rpx 15rpx 0rpx 0rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 5rpx;
			}
	
			.active {
				border: 1px solid red;
				color: red;
			}
		}
	
		.clearfloor::after {
			content: "";
			clear: both;
			display: inline-block;
		}
	}
	.nav_header {
		display: flex;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: white;
		position: fixed;
		top: 0;
		width: 750rpx;
		.bopx {
			margin: 0 20rpx;
		}
		.active{
			color: red;
		}
	}

	.main {
		padding-top: 80rpx;
		.box_main {
			box-sizing: border-box;
			padding: 20rpx;
			.header{
				margin: 20rpx 0rpx;
			}
			.box_content {
				background-color: white;

				.box_11 {
					display: flex;	
					justify-content: space-between;

					.center {
						display: flex;
						box-sizing: border-box;
						padding: 20rpx 30rpx;
						border-bottom: 1px solid #F0EFF4;

						.l {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							background-color: red;
							color: white;
							font-size: 20rpx;
							line-height: 80rpx;
							margin-right: 20rpx;
							text-align: center;
							vertical-align: middle;
						}

						.r-1 {
							.data1 {
								font-size: 20rpx;
								vertical-align: middle;
								color: #888888;
								margin-top: 10rpx;
							}
						}
					}

					.r {
						margin-right: 20rpx;
						text-align: right;
						box-sizing: border-box;
						padding: 20rpx;

						.r12 {
							font-size: 20rpx;
							vertical-align: middle;
							color: #888888
						}
					}
				}
			}
		}
	}
</style>
